﻿@{
    Layout = "";

    Html.AddCssFileParts("~/Plugins/Feed.Froogle/Content/styles.css");
}
@model FeedFroogleModel
@using Nop.Core.Infrastructure
@using Nop.Plugin.Feed.Froogle.Models;
@using Nop.Web.Framework;
@using Nop.Web.Framework.UI;
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <script>
        $(document).ready(function() {
            bindBootstrapTabSelectEvent('googlebase-configure');
        });
    </script>

    <div id="googlebase-configure" class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            @Html.RenderBootstrapTabHeader("tab-general", @T("Plugins.Feed.Froogle.General"), true)
            @Html.RenderBootstrapTabHeader("tab-override", @T("Plugins.Feed.Froogle.Override"))
        </ul>
        <div class="tab-content">
            @Html.RenderBootstrapTabContent("tab-general", @TabGeneral(), true)
            @Html.RenderBootstrapTabContent("tab-override", @TabOverride())
        </div>
    </div>
}
@helper TabGeneral()
{
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>
                    <ul>
                        <li>
                            At least two unique product identifiers are required. So each of your product should
                            have manufacturer (brand) and MPN (manufacturer part number) specified
                        </li>
                        <li>Specify default tax values in your Google Merchant Center account settings</li>
                        <li>Specify default shipping values in your Google Merchant Center account settings</li>
                        <li>
                            In order to get more info about required fields look at the following article <a href="http://www.google.com/support/merchants/bin/answer.py?answer=188494" target="_blank">http://www.google.com/support/merchants/bin/answer.py?answer=188494</a>
                        </li>
                    </ul>
                </p>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.ProductPictureSize)
                    </div>
                    <div class="col-md-9">
                        @Html.NopEditorFor(model => model.ProductPictureSize)
                        @Html.ValidationMessageFor(model => model.ProductPictureSize)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.PassShippingInfoWeight)
                    </div>
                    <div class="col-md-9">
                        @Html.NopEditorFor(model => model.PassShippingInfoWeight)
                        @Html.ValidationMessageFor(model => model.PassShippingInfoWeight)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.PassShippingInfoDimensions)
                    </div>
                    <div class="col-md-9">
                        @Html.NopEditorFor(model => model.PassShippingInfoDimensions)
                        @Html.ValidationMessageFor(model => model.PassShippingInfoDimensions)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.PricesConsiderPromotions)
                    </div>
                    <div class="col-md-9">
                        @Html.NopEditorFor(model => model.PricesConsiderPromotions)
                        @Html.ValidationMessageFor(model => model.PricesConsiderPromotions)
                    </div>
                </div>
                <div class="form-group" @(Model.AvailableStores.SelectionIsNotPossible() ? Html.Raw("style=\"display:none\"") : null)>
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.StoreId)
                    </div>
                    <div class="col-md-9">
                        @Html.NopDropDownListFor(model => model.StoreId, Model.AvailableStores)
                        @Html.ValidationMessageFor(model => model.StoreId)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.CurrencyId)
                    </div>
                    <div class="col-md-9">
                        @Html.NopDropDownListFor(model => model.CurrencyId, Model.AvailableCurrencies)
                        @Html.ValidationMessageFor(model => model.CurrencyId)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.DefaultGoogleCategory)
                    </div>
                    <div class="col-md-9">
                        @Html.NopDropDownListFor(model => model.DefaultGoogleCategory, Model.AvailableGoogleCategories)
                        @Html.ValidationMessageFor(model => model.DefaultGoogleCategory)
                    </div>
                </div>
                @if (Model.GeneratedFiles.Count > 0)
                {
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(m => m.GeneratedFiles)
                        </div>
                        <div class="col-md-9">
                            @for (int i = 0; i <= Model.GeneratedFiles.Count - 1; i++)
                            {
                                var generatedFile = Model.GeneratedFiles[i];
                                @generatedFile.StoreName <text>-</text> <a href="@generatedFile.FileUrl" target="_blank">@generatedFile.FileUrl</a>
                                if (i != Model.GeneratedFiles.Count - 1)
                                {
                                    <br />
                                }
                            }
                        </div>
                    </div>
                }
                <div class="form-group">
                    <div class="col-md-3">
                        &nbsp;
                    </div>
                    <div class="col-md-9">
                        <input type="submit" name="save" class="btn bg-blue" value="@T("Admin.Common.Save")" />
                        <input type="submit" name="generate" class="btn bg-green" value="@T("Plugins.Feed.Froogle.Generate")" />
                    </div>
                </div>
            </div>
        </div>
    </div>
}
@helper TabOverride()
{
var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;

    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>
                    You can download the list of allowed Google product category attributes <a href="http://www.google.com/support/merchants/bin/answer.py?answer=160081" target="_blank">here</a>
                </p>

                <script id="google-popup-editor" type="text/x-kendo-template">
                    <div style="padding: 0 20px;">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="GoogleCategory" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.GoogleCategory")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="GoogleCategory" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="Gender" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.Gender")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="Gender" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="AgeGroup" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.AgeGroup")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="AgeGroup" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="Color" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.Color")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="Color" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="GoogleSize" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.Size")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="GoogleSize" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5">
                                    <div class="label-wrapper">
                                        <label for="CustomGoods" class="control-label">
                                            @T("Plugins.Feed.Froogle.Products.CustomGoods")
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <input name="CustomGoods" type="checkbox" />
                                </div>
                            </div>
                        </div>
                    </div>
                </script>

                <div id="froogleproducts-grid"></div>

                <script>
                    $(document).ready(function() {
                        $("#froogleproducts-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("GoogleProductList", "FeedFroogle", new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Feed.Froogle.Controllers" }, { "area", "" } }))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    },
                                    update: {
                                        url: "@Html.Raw(Url.Action("GoogleProductUpdate", "FeedFroogle", new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Feed.Froogle.Controllers" }, { "area", "" } }))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id: "Id",
                                        fields: {
                                            ProductId: { editable: false, type: "number" },
                                            ProductName: { editable: false, type: "string" },
                                            GoogleCategory: { editable: true, type: "string" },
                                            Gender: { editable: true, type: "string" },
                                            AgeGroup: { editable: true, type: "string" },
                                            Color: { editable: true, type: "string" },
                                            GoogleSize: { editable: true, type: "string" },
                                            CustomGoods: { editable: true, type: "bool" },
                                            Id: { editable: false, type: "number" }
                                        }
                                    }
                                },
                                requestEnd: function(e) {
                                    if (e.type == "update") {
                                        this.read();
                                    }
                                },
                                error: function(e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: @(defaultGridPageSize),
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true,
                                pageSizes: [@(gridPageSizes)]
                            },
                            editable: {
                                confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                mode: "popup",
                                template: kendo.template($("#google-popup-editor").html())
                            },
                            scrollable: false,
                            columns: [{
                                field: "ProductName",
                                title: "@T("Plugins.Feed.Froogle.Products.ProductName")",
                                width: 300
                            }, {
                                field: "Id",
                                title: "Data",
                                width: 300,
                                template: '<div class="google-info">' +
                                    '<dl>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.GoogleCategory"):</dt><dd># if(GoogleCategory !== null) {# #:GoogleCategory# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Gender"):</dt><dd># if(Gender !== null) {# #:Gender# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.AgeGroup"):</dt><dd># if(AgeGroup !== null) {# #:AgeGroup# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Color"):</dt><dd># if(Color !== null) {# #:Color# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Size"):</dt><dd># if(GoogleSize !== null) {# #:GoogleSize# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.CustomGoods"):</dt><dd>#:CustomGoods#</dd>' +
                                    '</dl>' +
                                    '</div>'
                            }, {
                                command: {
                                    name: "edit",
                                    text: {
                                        edit: "@T("Admin.Common.Edit")",
                                        update: "@T("Admin.Common.Update")",
                                        cancel: "@T("Admin.Common.Cancel")"
                                    }
                                },
                                title: "@T("Admin.Common.Edit")",
                                width: 150
                            }
                            ]
                        });
                    });
                </script>

            </div>
        </div>
    </div>
}